<demo>
基本用例
</demo>
<template>
  <div class="x">
    <p>当点击标签时，其所对应的内容会隐藏或者展示，每一个标签之间互不影响。</p>
    <div>
      <Collapse>
        <CollapseItem title="标题1">内容1</CollapseItem>
        <CollapseItem title="标题2">内容2</CollapseItem>
        <CollapseItem title="标题3">内容3</CollapseItem>
      </Collapse>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import Collapse from "../lib/collapse.vue";
import CollapseItem from "../lib/collapseItem.vue";
export default {
  components: {
    Collapse,
    CollapseItem,
  },
};
</script>

<style lang='scss' scoped>
.x {
  width: 100%;
  > p {
    padding-bottom: 2%;
  }
}
</style>